<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>02_模板语法</title>
    </head>
    <body>
        <!--
      1. 模板的理解:
        动态的html页面
        包含了一些JS语法代码
          双大括号表达式
          指令(以v-开头的自定义标签属性)
      2. 双大括号表达式
        语法: {{exp}} 或 {{{exp}}}
        功能: 向页面输出数据
        可以调用对象的方法
      3. 指令一: 强制数据绑定
        功能: 指定变化的属性值
        完整写法:
          v-bind:xxx='yyy'  //yyy会作为表达式解析执行
        简洁写法:
          :xxx='yyy'
      4. 指令二: 绑定事件监听
        功能: 绑定指定事件名的回调函数
        完整写法:
          v-on:click='xxx'
        简洁写法:
          @click='xxx'
      -->
        <div id="app">
            <h2>1. 双大括号表达式</h2>
            <p>{{meg}}</p>

            <h2>2. 指令一: 强制数据绑定</h2>
            <!-- v-bind:xxx='yyy' yyy就会变成js表达式解析 -->
            <p >{{count}}</p>
            <input type="text" v-bind:value='num'>
            <h2>3. 指令二: 绑定事件监听</h2>
            <button @click='updateCount'>改变Count按钮</button>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                  meg:'今天有好好学习吗',
                  count:0,
                  num:0,
                },
                methods:{
                  updateCount(){
                    this.count=this.count+1
                  }
                }
            })
        </script>
    </body>
</html>
